/*PAGE*/
html {
font-size : 100%;
height : 101%;
}
body, h1, h2, h3, h4 {
margin : 0;
padding : 0;
}
body {
background : url("./bilder/bg.jpg") 0 0 repeat-x scroll #E5D9E2;
}
#page {
background-color : #E5D9E2;
font-family : verdana;
margin : 0 auto;
width : 900px;
background : url("./bilder/banner_06.jpg") 0 0 repeat-x scroll transparent;
}
#logocontainer {
background : url("./bilder/logo.jpg") 0 0 no-repeat scroll transparent;
height : 114px;
}
#content {
background-color : #300C95;
box-shadow : 5px 5px 10px black inset;
margin : 0;
min-height : 768px;
padding : 15px;
text-align : center;
position : relative;
}
#footer {
background : url("./bilder/footer_11.jpg") 0 0 repeat-x scroll black;
bottom : 0;
clear : left;
color : #E5D9E2;
font-size : 16px;
line-height : 50px;
text-align : center;
width : 900px;
}
/*NAVIGATION*/
/*top*/
#topnav {
font-size : 11px;
text-align : right;
}
#topnav a {
color : #383E46;
font-family : verdana;
font-size : 12px;
padding : 0 2px;
text-decoration : none;
}
#topnav a:hover {
text-decoration : underline;
}
/*main*/
#mainnav {
height : 32px;
margin : -32px 0 0 219px;
}
#mainnav li {
float : left;
list-style : none outside none;
position : relative;
text-align : center;
width : 150px;
padding : 0;
z-index : 1;
}
#mainnav a {
color : #E5D9E2;
display : block;
font-size : 28px;
font-weight : bold;
margin : 0 10px;
padding : 6px 0;
text-decoration : none;
}
#mainnav li.selected a {

/* IE9 SVG, needs conditional override of 'filter' to 'none' */

background: url();
background: -moz-linear-gradient(top, rgba(48,12,149,0.2) 30%, rgba(48,12,148,1) 95%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,rgba(48,12,149,0.2)), color-stop(95%,rgba(48,12,148,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(48,12,149,0.2) 30%,rgba(48,12,148,1) 95%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(48,12,149,0.2) 30%,rgba(48,12,148,1) 95%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(48,12,149,0.2) 30%,rgba(48,12,148,1) 95%); /* IE10+ */
background: linear-gradient(to bottom, rgba(48,12,149,0.2) 30%,rgba(48,12,148,1) 95%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33300c95', endColorstr='#300c94',GradientType=0 ); /* IE6-8 */

border-radius : 5px 5px 5px 5px;
color : #E5D9E2;
display : block;
font-weight : bold;
}
#mainnav li.selected:hover a {
/* IE9 SVG, needs conditional override of 'filter' to 'none' */

background: url();
background: -moz-linear-gradient(top, rgba(48,12,149,0.2) 30%, rgba(48,12,148,1) 95%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,rgba(48,12,149,0.2)), color-stop(95%,rgba(48,12,148,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(48,12,149,0.2) 30%,rgba(48,12,148,1) 95%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(48,12,149,0.2) 30%,rgba(48,12,148,1) 95%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(48,12,149,0.2) 30%,rgba(48,12,148,1) 95%); /* IE10+ */
background: linear-gradient(to bottom, rgba(48,12,149,0.2) 30%,rgba(48,12,148,1) 95%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33300c95', endColorstr='#300c94',GradientType=0 ); /* IE6-8 */

border-radius : 5px 5px 5px 5px;
color : #E5D9E2;
display : block;
font-weight : bold;
}
#mainnav li:hover a {
/* IE9 SVG, needs conditional override of 'filter' to 'none' */

background: url();
background: -moz-linear-gradient(top, rgba(48,12,149,0.2) 30%, rgba(48,12,148,1) 95%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,rgba(48,12,149,0.2)), color-stop(95%,rgba(48,12,148,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(48,12,149,0.2) 30%,rgba(48,12,148,1) 95%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(48,12,149,0.2) 30%,rgba(48,12,148,1) 95%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(48,12,149,0.2) 30%,rgba(48,12,148,1) 95%); /* IE10+ */
background: linear-gradient(to bottom, rgba(48,12,149,0.2) 30%,rgba(48,12,148,1) 95%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33300c95', endColorstr='#300c94',GradientType=0 ); /* IE6-8 */

border-radius : 5px 5px 5px 5px;
color : #E5D9E2;
text-decoration : none;
}
#mainnav li a {
background : rgba(48, 12, 149, 0.2);
color : #E5D9E2;
text-decoration : none;
z-index : 2;
}
#mainnav li:hover ul {
display : block;
z-index : 2;
}
#mainnav li ul {
margin : 0;
padding : 0;
position : absolute;
display : none;
background : rgba(48, 12, 149, 0.9);
border : none;
border-radius : 0 0 5px 5px;
z-index : 2;
}
#mainnav li ul a {
font-size : 1em;
border-radius : 0;
z-index : 2;
}
#mainnav li ul a:hover {
font-size : 1.1em;
border-radius : 0;
border : none;
color : #E5D9E2;
z-index : 2;
}
#mainnav li ul li {
float : none;
display : block;
z-index : 2;
}


#wrapper {
box-shadow : 7px 7px 7px 7px grey;
margin : 0 auto;
overflow : hidden;
width : 900px;
}

/*SPIEL*/
div.game {
background : url("bilder/spiel_layout_new.jpg") 60px center no-repeat scroll #300C95;
box-shadow : 71px 6px 10px #300C95 inset;
clear : both;
float : left;
height : 768px;
width : 100%;
font-size : 1.5em;
position : relative;
}
div.game div.playername {
height : 35px;
left : 454px;
position : absolute;
top : 31px;
width : 20em;
font-size : 1.0em;
text-align : center;
}
h1.playername {
color : #E5D9E2;
margin : auto;
}
/*result*/
#result {
height : 360px;
left : 619px;
position : absolute;
top : 92px;
width : 155px;
}
.resultlist {
color : orange;
float : left;
padding : 0;
position : absolute;
left : 15px;
top : 15px;
text-align : left;
}
ul.resultlist li {
list-style : none outside none;
margin : 2px;
}
ul.resultlist li.selected {
/* IE9 SVG, needs conditional override of 'filter' to 'none' */

background: url();
background: -moz-linear-gradient(top, rgba(48,12,149,0.2) 30%, rgba(48,12,148,1) 95%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,rgba(48,12,149,0.2)), color-stop(95%,rgba(48,12,148,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(48,12,149,0.2) 30%,rgba(48,12,148,1) 95%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(48,12,149,0.2) 30%,rgba(48,12,148,1) 95%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(48,12,149,0.2) 30%,rgba(48,12,148,1) 95%); /* IE10+ */
background: linear-gradient(to bottom, rgba(48,12,149,0.2) 30%,rgba(48,12,148,1) 95%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33300c95', endColorstr='#300c94',GradientType=0 ); /* IE6-8 */

border-radius : 5px 5px 5px 5px;
margin : 0 -15px 0 -10px;
padding : 0 15px 0 10px;
width : 120px;
}
ul.resultlist li.fallback {
color : #E5D9E2;
font-size : 105%;
font-style : italic;
}

/*buttons*/
#gamebuttons {
height : 400px;
left : 90px;
position : absolute;
top : 18px;
width : 100px;
}
button.joker, button.answer, button.quit {
border : none;
background-color : transparent;
cursor : pointer;
height : 69px;
width : 105px;
background-size : 100%;
}
.quit {
background : url("./bilder/gehen.png") no-repeat;
height : 69px;
width : 105px;
}
.quit:hover {
background : url("./bilder/gehen_choose.png") no-repeat;
background-size : 100%;
}
ul.joker {
position : absolute;
top : 100px;
padding-left : 0;
}
ul.joker li {
list-style : none outside none;
margin-bottom : 7px;
height : 69px;
width : 105px;
}
li.fiftyfiftyjoker {
background : url("./bilder/fiftyfifty.png") no-repeat;
background-size : 100%;
}
li.fiftyfiftyjoker:hover {
background : url("./bilder/fiftyfifty_choose.png") no-repeat;
background-size : 100%;
}
li.fiftyfiftyjoker.used {
background : url("./bilder/fiftyfifty_used.png") no-repeat;
background-size : 100%;
}
li.telephonejoker {
background : url("./bilder/telefonjoker.png") no-repeat;
background-size : 100%;
}
li.telephonejoker:hover {
background : url("./bilder/telefonjoker_choose.png") no-repeat;
background-size : 100%;
}
li.telephonejoker.used {
background : url("./bilder/telefonjoker_used.png") no-repeat;
background-size : 100%;
}
li.audiencejoker {
background : url("./bilder/publikumsjoker.png") no-repeat;
background-size : 100%;
}
li.audiencejoker:hover {
background : url("./bilder/publikumsjoker_choose.png") no-repeat;
background-size : 100%;
}
li.audiencejoker.used {
background : url("./bilder/publikumsjoker_used.png") no-repeat;
background-size : 100%;
}
li.riskjoker {
background : url("./bilder/zusatz.png") no-repeat;
background-size : 103px;
}
li.riskjoker:hover {
background : url("./bilder/zusatz_choose.png") no-repeat;
background-size : 103px;
}
li.riskjoker.used {
background : url("./bilder/zusatz_used.png") no-repeat;
background-size : 103px;
}
/*question*/
div.gamequestion {
background : url("./bilder/question.png") no-repeat;
background-size : 100%;
font-size : 0.8em;
height : 250px;
left : 90px;
position : absolute;
top : 495px;
width : 685px;
}
#question_text {
color : #E5D9E2;
height : 48px;
overflow : hidden;
padding : 0 50px 0;
text-align : left;
font-size : 1em;
margin : 10px;
}
#answer {
height : 200px;
left : 52px;
position : absolute;
top : 570px;
width : 800px;
}
ul.answerlist li {
background : url("./bilder/answer.png") no-repeat;
background-size : 100%;
float : left;
height : 41px;
list-style : none;
margin : 25px 0 0;
text-align : left;
width : 340px;
}
ul.answerlist li:hover {
background : url("./bilder/button_choose.png") no-repeat;
background-size : 100%;
}
button.answerlist {
color : #E5D9E2;
display : block;
font-size : 0.9em;
height : 35px;
margin : -30px 10px 0 25px;
overflow : hidden;
padding : 2px 0 2px 30px;
text-decoration : none;
border : none;
background-color : transparent;
width : 300px;
text-align : left;
}
button.answerlist:hover {
color : #E5D9E2;
display : block;
font-size : 0.9em;
height : 35px;
margin : -30px 10px 0 25px;
overflow : hidden;
padding : 2px 0 2px 30px;
text-decoration : none;
border : none;
background-color : transparent;
width : 300px;
text-align : left;
}
button.right {
color : #E5D9E2;
display : block;
font-size : 0.9em;
height : 41px;
margin : -30px 10px 0 0;
overflow : hidden;
padding : 0 0 5px 55px;
text-decoration : none;
border : none;
background : url("./bilder/button_right.png") no-repeat;
background-size : 100%;
width : 340px;
text-align : left;
}
button.right:hover {
color : #E5D9E2;
display : block;
font-size : 0.9em;
height : 41px;
margin : -30px 10px 0 0;
overflow : hidden;
padding : 0 0 5px 55px;
text-decoration : none;
border : none;
background : url("./bilder/button_right.png") no-repeat;
background-size : 100%;
width : 340px;
text-align : left;
}
button.wrong {
color : #E5D9E2;
display : block;
font-size : 0.9em;
height : 41px;
margin : -30px 10px 0 0;
overflow : hidden;
padding : 0 0 5px 55px;
text-decoration : none;
border : none;
background : url("./bilder/button_wrong.png") no-repeat;
background-size : 100%;
width : 340px;
text-align : left;
}
button.wrong:hover {
color : #E5D9E2;
display : block;
font-size : 0.9em;
height : 41px;
margin : -30px 10px 0 0;
overflow : hidden;
padding : 0 0 5px 55px;
text-decoration : none;
border : none;
background : url("./bilder/button_wrong.png") no-repeat;
background-size : 100%;
width : 340px;
text-align : left;
}
h2.answerlist {
font-family : verdana;
color : orange;
font-size : 1.2em;
margin : 7px 0 0 25px;
width : 0;
}
.pregamecat {
color : orange;
padding : 0;
position : absolute;
top : 10px;
left : 2px;
background : transparent;
width : 150px;
}


button.proceed {
background : url("./bilder/proceed.png") no-repeat;
background-size : 100%;
width : 200px;
height : 117px;
border : none;
color : #E5D9E2;
font-size : 1.6em;
font-weight : bold;
padding : 0;
}
button.newgame {
background : url("./bilder/newgame.png") no-repeat;
background-size : 100%;
width : 200px;
height : 200px;
border : none;
color : #E5D9E2;
font-size : 1.6em;
font-weight : bold;
padding : 0;
padding-top : 170px;
}
.joker_view {
width : 360px;
height : 360px;
top : 5px;
left : 5px;
position : absolute;
}
#audience {
background : url("./bilder/audience_bg.png") no-repeat;
background-size : 100%;
width : 220px;
height : 350px;
margin : 5px auto;
}
#audience_resultbox {
width : 200px;
height : 260px;
position : relative;
top : 20px;
left : 10px;
}
#A.audience_results {
width : 37.5px;
background : url("./bilder/audience_div.png") no-repeat;
background-size : 100% 100%;
position : absolute;
bottom : 0;
left : 1%;
}
#B.audience_results {
width : 37.5px;
background : url("./bilder/audience_div.png") no-repeat;
background-size : 100% 100%;
position : absolute;
bottom : 0;
left : 27%;
}
#C.audience_results {
width : 37.5px;
background : url("./bilder/audience_div.png") no-repeat;
background-size : 100% 100%;
position : absolute;
bottom : 0;
left : 54%;
}
#D.audience_results {
width : 37.5px;
background : url("./bilder/audience_div.png") no-repeat;
background-size : 100% 100%;
position : absolute;
bottom : 0;
left : 82%;
}
#audience_result_text {
font-weight : bold;
color : black;
font-size : 0.8em;
bottom : -25px;
left : 5px;
margin : 0;
position : absolute;
}
#risk_telephone {
background : url("./bilder/risk_telephone_bg.png") no-repeat;
background-size : 100% 100%;
width : 330px;
height : 270px;
left : 15px;
top : 50px;
position : absolute;
}
#risk_telephone_text {
color : black;
position : absolute;
top : 28%;
width : 12em;
left : 15%;
font-size : 1.4em;
}
pre {
text-align : left;
}
/*Messages*/

.message, .gameerror {
color : #E5D9E2;
font-weight : bold;
position : absolute;
top : 88px;
left : 220px;
width : 369px;
height : 369px;
background : url("./bilder/message.png") repeat-x;
background-size : 100% 100%;
}
.messagetext {
position : relative;
top : 25%;
}

#notificationtext {
height : 20px;
padding : 10px;
color : #FFFFFF;
font-weight : bold;
}
#notificationtext.error {
background-color : #FF0000;
border : #880000 solid 2px;
}
#notificationtext.success {
background-color : #01DF01;
border : #088A08 solid 2px;
}
/*ADMINNAV*/
#admin {
text-align : left;
margin : 0 0 0 230px;
}
#admin li {
float : left;
list-style : none outside none;
position : relative;
text-align : center;
}
#admin a {
display : block;
font-size : 18px;
font-weight : bold;
margin : 0 10px;
padding : 6px 0;
color : #E5D9E2;
border-radius : 5px;
}
#admin li:hover a {
/* IE9 SVG, needs conditional override of 'filter' to 'none' */

background: url();
background: -moz-linear-gradient(top, rgba(48,12,149,0.2) 30%, rgba(48,12,148,1) 95%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,rgba(48,12,149,0.2)), color-stop(95%,rgba(48,12,148,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(48,12,149,0.2) 30%,rgba(48,12,148,1) 95%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(48,12,149,0.2) 30%,rgba(48,12,148,1) 95%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(48,12,149,0.2) 30%,rgba(48,12,148,1) 95%); /* IE10+ */
background: linear-gradient(to bottom, rgba(48,12,149,0.2) 30%,rgba(48,12,148,1) 95%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33300c95', endColorstr='#300c94',GradientType=0 ); /* IE6-8 */

border-radius : 5px 5px 5px 5px;
color : #E5D9E2;
text-decoration : none;
}

a.pageText {
color : #E5D9E2;
font-size : 1.4em;
font-weight : serif;
}
a.pageText:hover,a.pageText:link {
color : #E5D9E2;
font-size : 1.4em;
font-weight : bold;
}

#newquestion {
text-align : left;
margin : 0 0 0 280px;
}

.pageText {
color : #E5D9E2;
font-size : 1.4em;
font-weight : bold;
}
select.category {
position : relative;
left : 70px;
width : 207px;
}
select.difficulty {
position : relative;
left : 40px;
}
input.questiontext {
position : relative;
width : 300px;
}
input.questionID {
position : relative;
left : 125px;
}
input.right {
position : relative;
left : 15px;
}
input.wrong {
position : relative;
left : 5px;
}
input.submit {
font-size : 1.5em;
font-weight : bold;
}
table.resultchange {
margin-left : auto;
margin-right : auto;
text-align : center;
border : 0;
background : url("./bilder/bg_table.jpg") 0 0 repeat-x scroll #E5D9E2;
box-shadow : 5px 5px 10px black inset;
}
th.resultchange {
font-size : 1.2em;
border : 0;
width : 200px;
}
tr.resultchange {
border : 0;
color : rgb(0, 0, 0);
font-size : 1.4em;
}
td.resultchange {
border : 0;
color : black;
}
select.change {
background : url("./bilder/bg_table.jpg") 0 0 repeat-x scroll #E5D9E2;
box-shadow : 5px 5px 10px black inset;
}
#category {
margin : 0 0 0 20px;
}
.stats {
color : #E5D9E2;
font-weight : bold;
font-size : 1.3em;
}
.Highscore {
margin : auto auto;
width : 630px;
margin-top : 30px;
}
.statsnav {
background : url("./bilder/bg_table.jpg") 0 0 repeat-x scroll #E5D9E2;
box-shadow : 5px 5px 10px black inset;
width : 125px;
}

.deletedUser{
	color:red;
	font-weight:serif;
}

caption {
font-size : 1.5em;
margin : 5px;
}

.radio {
    display: none;
}
 
.radio + label {
    -webkit-appearance: none;
    background-color: #fafafa;
    border: 1px solid #cacece;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 9px;
    border-radius: 50px;
    display: inline-block;
    position: relative;
}
 
.radio:checked + label:after {
    content: ' ';
    width: 12px;
    height: 12px;
    border-radius: 50px;
    position: absolute;
    top: 3px;
    background: #E5D9E2;
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
    text-shadow: 0px;
    left: 3px;
    font-size: 32px;
}
 
.radio:checked + label {
    background-color: #e9ecee;
    color: #E5D9E2;
    border: 1px solid #adb8c0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
}
 
.radio + label:active, .radio:checked + label:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.invisible {
display : none;
}
.violet {
color : #300C95;
}
.black {
color : black;
}